<template>
	<view class="content">
		<view class="shop">
			<view class="shop-item" v-for="(item, index) in shopList" :key="index" @click="switchShop(item)">
				<image :src="img_url + item.images" mode="widthFix"></image>
				<text style="margin-top: 16px;">{{ item.name }}</text>
				<text>¥{{ item.price }}/{{ item.sub_name }}</text>
			</view>
		</view>
		<tab></tab>
		<view class="no-tip flex-center-col" v-if="!shopList.length">
			<image src='https://bile-1306178125.cos.ap-shanghai.myqcloud.com/static/teamwang/no/noshop.png'
				mode="widthFix" />
			<view class="tip">当前商店暂无商品请稍后再来…</view>
		</view>
	</view>
</template>

<script>
import tab from '../../components/tab/tab.vue'
import { img_url } from '../../request/index';
import {
	mapState,
	mapActions
} from 'vuex';

export default {
	components: {
		tab,
	},
	data() {
		return {
			img_url,
		}
	},
	computed: {
		...mapState({
			shopList: state => state.shop.shopList // 确保这里引用正确
		})
	},
	onLoad(options) {
		this.getShopList();
	},
	methods: {
		...mapActions(['getShopList',]),
		switchShop(item) {
			console.log('switchShop', item, item.id);
			uni.navigateTo({
				url: '/packageA/shopDetail/shopDetail?shopId=' + item.id
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.content {
	overflow-y: auto;
}

.shop {
	display: block;
	width: 100%;
	margin-bottom: 82px;
	overflow-y: auto;
	column-count: 2;
	column-gap: 0px;
}

.shop-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	border: 0.5px solid #eeeeee;
	box-sizing: border-box;
	break-inside: avoid; // 避免在列之间断开
}

.shop-item image {
	width: 100%;
	min-height: 120px;
	height: auto;
}

.shop-item text {
	display: block;
	margin-bottom: 23px;
	font-size: 14px;
	font-weight: 600;
}

.no-tip {
	width: 100%;
	height: 80%;

	image {
		width: 30%;
	}

	.tip {
		width: 30%;
		font-weight: 500;
		font-size: 14px;
		color: #C9C9C9;
		letter-spacing: 1px;
		margin-top: 18px;
		text-align: center;
	}
}
</style>
